<template>
  <view class="line-card">
    <view class="line-card__tabs">
      <view class="line-card__tab" @tap="showWeekChart"
            :class="{'line-card__tab--active':chartDateType=='week'}">
        每周
      </view>
      <view class="line-card__tab" @tap="showMonthChart"
            :class="{'line-card__tab--active':chartDateType=='month'}">
        每月
      </view>
    </view>
    <!--  注意:因为 canvas 不能重绘的原因,无法使用 v-if    -->
    <view class="line-card__content" :class="{'line-card__content--hidden':chartDateType!=='week'||forceHidden}">
      <slot name="week"></slot>
    </view>
    <view class="line-card__content" :class="{'line-card__content--hidden':chartDateType!=='month'||forceHidden}">
      <slot name="month"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "line-chart-tab-group",
  props:{
    forceHidden:{
      type:Boolean,
      default:false,
    }, // 外部用一个变量控制,如果 true,就隐藏,因为 canvas 无法用普通的方式隐藏,小程序是 SB
  },
  data(){
    return {
      chartDateType:"week",
    }
  },
  methods:{
    showWeekChart(){
      this.chartDateType = "week"
    },
    showMonthChart(){
      this.chartDateType = "month"
    }
  }
}
</script>

<style lang="less">

</style>
